<template>
	<div :class="className">
		<div class="box">
			<el-row style="margin-top: 20px;">
				<el-col :span="24">
					<dv-decoration7>
						<div class="box_shift">当前班次：{{ shiftName }}</div>
					</dv-decoration7>
				</el-col>
			</el-row>
			<el-row style="padding-top: 20px;">
				<el-col :span="3">
					<div class="box_row_header">区域</div>
				</el-col>
				<el-col :span="7">
					<div class="box_row_header">计划数量</div>
				</el-col>
				<el-col :span="7">
					<div class="box_row_header">实际完工数</div>
				</el-col>
				<el-col :span="7">
					<div class="box_row_header">生产进度</div>
				</el-col>
			</el-row>
			<div v-for="item in areas" :key="item.areaName">
				<el-divider />
				<el-row>
					<el-col :span="3">
						<div class="box_row_item area_row_0">{{ item.areaName }}</div>
					</el-col>
					<el-col :span="7">
						<div class="box_row_item area_row_1">{{ item.taskCount }}</div>
					</el-col>
					<el-col :span="7">
						<div class="box_row_item area_row_2">{{ item.actualCount }}</div>
					</el-col>
					<el-col :span="7">
						<div class="box_row_item area_row_3">{{ item.rate }}</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
export default {
    props: {
        className: { type: String, default: '' },
        isMock: { type: Boolean, default: false },
    },
    data() {
        return {
            dataTimer: null,
            shiftName: '',
            areas: [],
        };
    },
    mounted() {
        if (this.isMock) {
            this.mock();
            return;
        }

        this.getData();
        this.setTimer();
    },
    beforeUnmount() {
        if (this.dataTimer) {
            clearInterval(this.dataTimer);
            this.dataTimer = null;
        }
    },
    methods: {
        setTimer() {
            this.dataTimer = setInterval(async () => {
                await this.getData();
            }, 31000); // 31s
        },
        mock() {
        },
        async getData() {
            try {
                const resp = await this.$API.reportproduction.stat.get();
                if (resp.code === 200) {
                    const data = resp.data;
                    this.shiftName = data.shiftName;
                    this.areas = data.areas;
                }
            } catch {
                console.warn("[production-task] 无响应数据");
            }
        }
    },
};
</script>

<style lang="scss" scoped>
%bg {
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 128px 128px;
}

.box {
    height: 96%;
    width: 100%;
    padding: 0 5px;
}

.box_shift {
    margin: 0 20px;
    height: 50px;
    font-size: 26px;
    font-weight: 600;
    justify-self: center;
    align-content: center;
    color: #FFDB5C;
}

.box_row_header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    font-size: 24px;
    font-weight: 600;
    color: #00EAFF;
}

.box_row_item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    font-size: 40px;
    font-weight: 700;
}

.area_row_0 {
    color: #08e5ff;
    font-size: 28px;
}

.area_row_1 {
    color: #3DE7C9;
}

.area_row_2 {
    color: #00EAFF;
}

.area_row_3 {
    color: #9FE6B8;
}
</style>
